<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title" :goHome="fromShare"></status-bar>

        <view class="Store">
            <view class="Content">
                <view class="StoreBox">
                    <view class="StoreBox_name">
                        <view class="iconfont icon-store size36 m-right20 m-left4"></view>
                        <text class="Store_name">{{ shop.name }}</text>
                    </view>
                    <view class="StoreBox_address">
                        <view class="iconfont icon-B size38 m-right20 m-left4"></view>
                        <text class="Store_address">{{ shop.address }}</text>
                    </view>
                </view>
                <!-- <view class="iconfont icon-xiangyouxiayiye color_99 size26"></view> -->
            </view>
        </view>

        <view class="Wrapper" v-if="pageData.length">
            <view class="Boxlist" v-for="(item, index) in pageData" :key="index">
                <view class="Box">
                    <view class="d-flex a-center">
                        <image :src="$imgUrls(item.food_category_info.logo)" v-if="item.food_category_info.logo" mode="aspectFill" class="logo"></image>
                        <text class="flex-1 ellipsis black size30">{{ item.food_category_info.name }}</text>
                    </view>
                    <view class="product" v-for="(sub, sin) in item.goodsData" :key="sin">
                        <image :src="$imgUrls(sub.goods_img)" mode="aspectFill" class="goods_img"></image>
                        <view class="productBox">
                            <text class="goods_name ellipsis_2">{{ sub.goods_name }}</text>
                            <text class="specs_bind_text">{{ sub.specs_bind_text }}</text>
                            <view class="row a-center j-sb">
                                <view class="d-flex a-center">
                                    <text class="color_ff4 h6">￥</text>
                                    <text class="color_ff4 size32 bold500">{{ sub.price }}</text>
                                </view>

                                <text class="color_33 size26">X{{ sub.goods_num }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="total">
                    <view class="row a-center j-sb">
                        <view class="d-flex a-center">
                            <text class="title">商品总价</text>
                            <text class="color_99 h6">共{{ item.goods_num }}件商品</text>
                        </view>
                        <view class="d-flex a-center">
                            <text class="color_ff4 h6">￥</text>
                            <text class="color_ff4 size30 bold500">{{ item.payment }}</text>
                        </view>
                    </view>
                    <view class="row a-center m-top20 j-sb" v-if="item.v_jifen_yue || item.discount">
                        <view class="d-flex a-center" v-if="item.v_jifen_yue">
                            <text class="title">会员权益</text>
                            <text class="color h6">积分余额{{ item.v_jifen_yue }}分</text>
                        </view>
                        <view class="color size26" v-if="item.discount">抵扣{{ item.discount }}元</view>
                    </view>
                </view>
            </view>
        </view>

        <emptys v-if="!pageData.length" title="暂无相关内容"></emptys>

        <view class="footer" v-if="pageData.length">
            <view class="fotBox">
                <view class="BackBtn" @click="BackBtn">归还餐具</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                title: '归还餐具',
                shop_id: '',
                pageData: [],
                shop: '',
                order_ids: ''
            };
        },
        onLoad(opt) {
            if (opt.shop_id) this.shop_id = opt.shop_id;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.getAuthCodePayLog();
        },
        methods: {
            getAuthCodePayLog() {
                this.$http
                    .get({
                        url: '/cashierApi/getAuthCodePayLog',
                        data: {
                            shop_id: this.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.shop = result.shop;
                        this.pageData = result.list || [];
                        this.order_ids = result.order_ids;
                    });
            },
            async BackBtn() {
                const result = await this.$Modals('提示', '确定归还餐具？');
                if (!result) return;
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/cashierApi/returnDishes',
                        data: {
                            order_ids: this.order_ids,
                            shop_id: this.shop_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.getAuthCodePayLog();
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
    }
</style>

<style lang="scss" scoped>
    @mixin flexCenter {
        display: flex;
        align-items: center;
    }
    @mixin wrapper {
        width: 100%;
        padding: 24rpx;
        background-color: #ffffff;
    }

    .Wrapper {
        width: 710rpx;
        margin: 0 auto;
        .Boxlist {
            width: 100%;
            margin-top: 24rpx;
            .Box {
                width: 100%;
                background-color: #ffffff;
                padding: 24rpx;
                border-radius: 10rpx;
                display: flex;
                flex-direction: column;
                .logo {
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    margin-right: 24rpx;
                }
                .product {
                    width: 100%;
                    display: flex;
                    margin-top: 30rpx;
                    .goods_img {
                        width: 150rpx;
                        height: 150rpx;
                        border-radius: 10rpx;
                        margin-right: 24rpx;
                    }
                    .productBox {
                        flex: 1;
                        height: 100%;
                        height: 150rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .goods_name {
                            color: #000;
                            font-size: 30rpx;
                            font-weight: 500;
                        }
                        .specs_bind_text {
                            color: #999;
                            font-size: 24rpx;
                        }
                    }
                }
            }
            .total {
                width: 100%;
                margin-top: 20rpx;
                background-color: #ffffff;
                padding: 24rpx;
                border-radius: 10rpx;
                .title {
                    color: #000;
                    font-size: 30rpx;
                    margin-right: 20rpx;
                }
            }
        }
    }

    .Store {
        @include wrapper;
        width: 710rpx;
        margin: 24rpx auto 0;
        border-radius: 10rpx;
        .Content {
            width: 100%;

            margin-bottom: 10rpx;
            display: flex;
            align-items: center;

            .StoreBox {
                flex: 1;
                display: flex;
                flex-direction: column;

                .StoreBox_name {
                    @include flexCenter;

                    .shopLogo {
                        width: 36rpx;
                        height: 36rpx;
                        border-radius: 6rpx;
                        margin-right: 14rpx;
                    }

                    .Store_name {
                        color: #000;
                        font-size: 34rpx;
                        font-weight: bold;
                    }
                }

                .StoreBox_address {
                    display: flex;
                    padding-top: 20rpx;

                    .Store_address {
                        color: #333;
                        font-size: 30rpx;
                    }
                }
            }
        }
    }
    .footer {
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .fotBox {
            width: 100%;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .BackBtn {
                width: 690rpx;
                height: 80rpx;
                background-color: var(--color);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30rpx;
                font-weight: 500;
                border-radius: 10rpx;
            }
        }
    }
</style>
